<template>
  <van-nav-bar
    title="商品详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in imgList" :key="item">
      <img :src="item" class="detail-img" />
    </van-swipe-item>
  </van-swipe>
  <p class="detail-proname">{{ goodsDetail.proname }}</p>
  <p class="detail-price">
    <span
      ><span style="color: black; font-size: 0.16rem">价格：</span
      >{{ goodsDetail.originprice }}</span
    >
    <span
      ><span style="color: black; font-size: 0.16rem">销量：</span
      >{{ goodsDetail.sales }}</span
    >
  </p>
  <van-stepper v-model="value" />

  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      @click="onClickIconGoCart"
    />
    <van-action-bar-icon icon="shop-o" text="店铺" />
    <van-action-bar-button
      type="danger"
      text="加入购物车"
      @click="onClickButton"
    />
  </van-action-bar>
</template>

<script>
import { getGoodsDetailApi } from "@/api/class.js";
import { goodsAddShopCartApi } from "@/api/cart.js";
import { showConfirmDialog, showToast } from "vant";
export default {
  name: "Detail",
  data() {
    return {
      proid: this.$route.params.id, // 商品id
      goodsDetail: [],
      imgList: [],
      value: 1,
    };
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      this.$router.back(-1);
    },
    // 获取商品详情
    async getGoodsDetail() {
      let res = await getGoodsDetailApi(this.proid);
      if (res.data.code === "200") {
        this.goodsDetail = res.data.data;
        this.imgList.push(
          res.data.data.img1,
          res.data.data.img2,
          res.data.data.img3,
          res.data.data.img4
        );
      }
    },
    // 获取商品信息，加入购物车
    async goodsAddShopCart() {
      let res = await goodsAddShopCartApi({
        userid: sessionStorage.getItem("userid"),
        proid: this.proid,
        num: this.value,
      }); 
      if (res.data.code === "200") {
        showToast("加入购物车成功！");
      } else {
        showToast("加入失败！");
      }
      // console.log("fqq");
    },
    // 进入购物车页面
    onClickIconGoCart() {
      this.$router.push({ path: "/ShopCart", query: {} });
    },
    // 调用加入购物车
    onClickButton() {
      if (sessionStorage.getItem("userid")) {
        this.goodsAddShopCart();
      } else {
        showConfirmDialog({
          title: "higoApp",
          message: "你好，你还没有登录！请登录后再进行操作！",
        })
          .then(() => {
            this.$router.push("/Login?path=" + this.$route.path);
          })
          .catch(() => {
            // on cancel
          });
      }
      // console.log(1);
    },
  },
  created() {
    // 调用获取商品详情函数
    this.getGoodsDetail();
  },
};
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
  height: 2.5rem;
  /* border-radius: 10px; */
}
.detail-img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.detail-proname {
  margin: 10px 0;
  background-color: #eee;
  padding: 0.05rem;
}
.detail-price {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  color: tomato;
  font-size: 0.2rem;
}
</style>
